<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>成本组成</title>
  <link rel="stylesheet" type="text/css" href="assets/css/comm.css" />
  <link rel="stylesheet" type="text/css" href="assets/js/src/css/layui.css" />
  <link rel="stylesheet" type="text/css" href="assets/css/navigation.css" />
  <link rel="stylesheet" type="text/css" href="assets/css/costComposition.css" />

</head>

<body>
  <div class="container">
    <div class="navigation before">
    </div>
    <div class="content">
      <header class="">
        <div class="left">
          <div class="">
            <h2>成本组成</h2>
            <div class="">
              <a href="DSS-index.html">DSS首页</a> - <a href="projectBudget.html">项目预算</a> - <span>成本组成</span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="search">
            <div class="year">
              <p>时间：</p>
              <input type="text" name="" id="year" value="" />
            </div>
            <div class="section">
              <p>部门：</p>
              <div class="sector">
                <div class="">
                  <span></span>
                </div>
              </div>
              <div class="options">
                <div class="all">
                  <i></i>
                  <p>全所</p>
                </div>
              </div>
            </div>
          </div>
          <time></time>
          <div class="menu">
            <a class="goBack" href="javascript:goFront();">前往后台</a>
            <div class="user">
              <p>A</p>
              <div class="">
                <a href="change-password.html">修改密码</a>
                <a href="login.html">退出登录</a>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div class="wrapper">
        <div class="costComposition-con" style="margin-bottom: 16px;">
          <div class="costComposition-item">
            <h2> <span class="title1"> </span>费用支出占比</h2>
            <div style="display: flex; width: 100%; height: 100%;">
              <div id="MilitarySecondGrade"></div>
              <div class="label">
                <div class="totol">
                  <div style="color:#4E5969; font-size: 16px;">总计</div>
                  <p><span class="junerpintotolNum"> </span> 万元</p>
                </div>
                <div class="label-item">
                  <div style="border-left:4px solid #165DFF; ">
                    <span class="name1"> </span>
                    <p> <span class="pre1"> </span> %</p>
                  </div>
                  <div style="border-left:4px solid #50CD89; ">
                    <span class="name2"> </span>
                    <p> <span class="pre2"> </span> %</p>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="costComposition-item" style="margin-right: 0;">
            <h2><span class="title2"> </span>费用支出占比</h2>
            <div style="display: flex; width: 100%; height: 100%;">
              <div id="CivilianGoods"></div>
              <div class="label">
                <div class="totol">
                  <div style="color:#4E5969; font-size: 16px;">总计</div>
                  <p><span class="minpintotolNum"> </span> 万元</p>
                </div>
                <div class="label-item">
                  <div style="border-left:4px solid #165DFF; ">
                    <span class="name3"> </span>
                    <p> <span class="pre3"> </span> %</p>
                  </div>
                  <div style="border-left:4px solid #50CD89; ">
                    <span class="name4"></span>
                    <p> <span class="pre4"></span> %</p>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="costComposition-con">
          <div class="costComposition-item">
            <h2><span class="title3"> </span>费用支出占比</h2>
            <div style="display: flex; width: 100%; height: 100%;">
              <div id="PreResearch"></div>
              <div class="label">
                <div class="totol">
                  <div style="color:#4E5969; font-size: 16px;">总计</div>
                  <p><span class="yuyantotolNum"> </span> 万元</p>
                </div>
                <div class="label-item">
                  <div style="border-left:4px solid #165DFF; ">
                    <span class="name5"> </span>
                    <p> <span class="pre5"> </span> %</p>
                  </div>
                  <div style="border-left:4px solid #50CD89; ">
                    <span class="name6"> </span>
                    <p> <span class="pre6"> </span> %</p>
                  </div>
                  <!-- <div style="border-left:4px solid #FFC107; ">
                    <span >专用费</span>
                    <p> <span class="">10</span> %</p>
                  </div> -->
                </div>
              </div>
            </div>

          </div>
          <div class="costComposition-item" style="margin-right: 0;">
            <h2><span class="title4"> </span>费用支出占比</h2>
            <div style="display: flex; width: 100%; height: 100%;">
              <div id="Portrait"></div>
              <div class="label" style="margin-top: 10%;">
                <div class="totol">
                  <div style="color:#4E5969; font-size: 16px;">总计</div>
                  <p><span class="zongxiangtotolNum"> </span> 万元</p>
                </div>
                <div class="label-item" id="item4">
                  <div style="border-left:4px solid #165DFF; ">
                    <span class="name7"> </span>
                    <p> <span class="pre7"> </span> %</p>
                  </div>
                  <div style="border-left:4px solid #50CD89 ; ">
                    <span class="name8"> </span>
                    <p> <span class="pre8">20</span> %</p>
                  </div>
                  <!-- <div style="border-left:4px solid #165DFF; ">
                    <span class="name9"></span>
                    <p> <span class="pre9"></span> %</p>
                  </div> -->
                  <!-- <div style="border-left:4px solid #FD7E14; ">
                    <span class="name9"></span>
                    <p> <span class="pre9"></span> %</p>
                  </div> -->
                  <!-- <div style="border-left:4px solid #0DCAF0; ">
                    <span>薪酬</span>
                    <p> <span class="">10</span> %</p>
                  </div>
                  <div style="border-left:4px solid #C9CDD4; ">
                    <span>其它</span>
                    <p> <span class="">10</span> %</p>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src="assets/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/http/api.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/test.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/src/layui.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/navigation.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/costComposition.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>